<template>
    <div class="register">
        <Header title="注册"></Header>
        <div class="img">丑团</div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" color="#ffc400">
                    注册
                </van-button>
                <van-button round block type="info"  color="#ffc400" class="login" @click="toLogin">
                   已有账号？去登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import Header from '../../components/Store_header.vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
import { reactive,toRefs } from 'vue';
export default defineComponent({
    name: 'App',
    components: {
        Header
    },
    setup(){
        const router = useRouter();
        let data = reactive({
            username:"",
            password:""

        })
        // 实现的注册方法
        const register = (value)=>{
            // 向localStorage中存储数据，（键和值）
            localStorage.setItem("userInfo",JSON.stringify(value));
            showToast("注册成功")
            router.push("/login")
        }
        // 提交按钮
        const onSubmit = (value)=>{
            // 如果localStorage中的userInfo存在，且userInfo的"用户名"等于输入的用户名，则说明该账号存在
            // parse获取json的字符串，如果不用parse则获取不到undifind
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo);
                // 说明该账号存在，并提示
                if(userInfo["用户名"]===value["用户名"]){
                    showToast("该账号已存在")
                    return;
                    // 否则，不存在则进行注册
                }else{
                    register(value)
                }
                // 如果localStorage.userInfo的数据都不存在那么也进行注册
            }else{
                register(value)
            }
        }
        // 去登录
        const toLogin = ()=>{
            router.push("/login")
        }
        return{
            toLogin,
            ...toRefs(data),
            onSubmit
        }
    }

})
</script>
<style lang="less" scoped>
.register{
    .img{
        width: 200px;
        height: 200px;
        background-color: #ffc400;
        font-size: 80px;
        line-height: 200px;
        text-align: center;
        border-radius: 40px;
        margin: 20px auto;
    }
    .login{
        margin-top: 20px;
    }
}
    
</style>